<template>
  <!-- 5月20号开发完成  开发人员：王世龙 -->
  <div>
    <main>
      <!-- 背景1 -->

      <div class="bg1">
        <img :src="zhjd111.bgImg" alt="" class="bg11" />
        <span class="zhjd">{{ zhjd111.title }}</span>
        <span class="zhfw">{{ zhjd111.subtitle }}</span>
      </div>
      <!-- 背景1 -->
      <!-- 背景2 -->
      <!-- <imgss :imgarr="imgarr" :auto="auto"></imgss> -->
      <imgss :imgarr="imgarr"></imgss>
      <div class="bg2">
        <div class="yzsfw" v-html="zhjd1111"></div>

        <el-button
          type="primary"
          round
          class="btn"
          @click="jump('/One_stop_service')"
          >查看详情
          <!-- <img src="./zhjd_img/icon19.png" alt="" class="icon19"> -->
        </el-button>
      </div>
      <!-- 背景2 -->
      <!-- 背景3 -->
      <div class="bg3">
        <span class="sjjc">大数据分析决策 </span>
        <span class="ywzb"
          >通过微信、企业微信及直播平台，最大程度拓宽客户线上触点，并依靠客户激励策略、员工跟进策略及复盘工具提升拉新、促活、转化、复购等业务指标</span
        >
        <div class="box1">
          <img src="./zhjd_img/icon20.png" alt="" class="icon20" />
          <span class="sjfx">数据分析</span>
          <span class="bb">告别各“一系统一报表”，数据不再孤立</span>
        </div>
        <div class="box2">
          <img src="./zhjd_img/icon21.png" alt="" class="icon21" />
          <span class="jyfx">经营分析 </span>
          <span class="cl">数学建模输出经营策略建议</span>
        </div>
        <div class="box3">
          <img src="./zhjd_img/icon22.png" alt="" class="icon22" />
          <span class="yhfx">用户分析</span>
          <span class="yhsj">海量准确的用户画像数据</span>
        </div>
        <el-button
          type="primary"
          round
          class="btn1"
          @click="jump('/The_data_analysis')"
          >查看详情
        </el-button>
      </div>
      <!-- 背景3 -->
      <!-- 背景4 -->
      <div class="bg4">
        <span class="qyyx">企业营销</span>
        <span class="ywzb"
          >通过微信、企业微信及直播平台，最大程度拓宽客户线上触点，并依靠客户激励策略、员工跟进策略及复盘工具提升拉新、促活、转化、复购等业务指标</span
        >
        <div class="img1">
          <img v-lazy="require('./zhjd_img/img1.png')" alt="" class="img11" />
          <span class="fwyx">服务和营销一体化</span>
          <el-button type="primary" round class="btn2">
            <a
              class="btn22"
              href="http://grandcanal-test.web.qunlicloud.com/linkage?id=11c50a77-0ab6-4368-a415-89d3e900e544"
              >查看详情</a
            >
            <!-- <img src="./zhjd_img/icon19.png" alt="" class="icon19"> -->
          </el-button>
        </div>
      </div>
      <!-- 背景4 -->
      <!-- 背景5 -->
      <div class="bg5">
        <span class="alfx">案例分享</span>
        <div class="image1">
          <img v-lazy="require('./zhjd_img/image1.png')" class="photo1" />
          <span class="kmbg">昆明维笙望湖宾馆</span>
        </div>
        <div class="image2">
          <img v-lazy="require('./zhjd_img/image2.png')" class="photo2" />
          <span class="shxg">丽江喜多娜三合行馆</span>
        </div>
        <div class="image3">
          <img v-lazy="require('./zhjd_img/image3.png')" class="photo3" />
          <span class="lgjd">剑川沙溪兰林阁酒店</span>
        </div>
        <div class="image4">
          <img v-lazy="require('./zhjd_img/image4.png')" class="photo4" />
          <span class="qejd">珠海长隆企鹅酒店</span>
        </div>
      </div>
      <!-- 背景5 -->
      <tabless :tablearr="tablearr"></tabless>
      <Header></Header>
      <Footer></Footer>
    </main>
  </div>
</template>

<script>
//引入头部组件
// table
import { getlag, getpages, getimgs, gettables } from "@/api/srapi/srapi.js";
import tabless from "@/views/srdemo/component/table.vue";
//img
import imgss from "@/views/srdemo/component/img.vue";
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
import { getZhjdxqy, getZhjdxqyy } from "@/api/wslapi/";
//引入jquery
export default {
  watch: {
    // showdia() {
    //   this.auto = this.showdia;
    // },
  },
  created() {
    this.ptjs();
    this.zhjd();
  },
  mounted() {
    // console.log(this.$route.query.id);

    //获取页面的全部数据
    this.getallpages();
    //获取轮播图片
    this.getimgss();
    //获取table图片
    this.gettabless();
  },
  data() {
    return {
      zhjd111: [],
      zhjd1111: null,
      //轮播图得数据
      imgarr: [],
      //table得数据
      tablearr: [],
      //当前激活得table
      clicktableimg: 0,
    };
  },
  methods: {
    async getallpages() {
      const res = await getlag("20e1a958-524d-4f0e-8407-31289732cae7");
      this.bandat = res.data.data;
      //  console.log(res.data.data);
      //  console.log(res.data.data.pcUrl);
      const pages = await getpages(res.data.data.pcUrl);
      this.pagetable = pages.data.content;
    },
    //获取轮播图
    async getimgss() {
      const res = await getimgs("b6675309-7be7-4836-a922-4dc681289aac");
      // console.log("imgs");
      res.data.data.banners.map((item) => {
        if (item.bannerImg) {
          this.imgarr.push(item);
        }
      });
      // console.log(this.imgarr);
    },
    //获取table图片
    async gettabless() {
      const res = await gettables("b6675309-7be7-4836-a922-4dc681289aac");
      res.data.data.tabs.map((item) => {
        if (item.tabImg) {
          this.tablearr.push(item);
        }
        // console.log(this.tablearr);
      });
    },
    zhjd() {
      getZhjdxqyy().then((res) => {
        this.zhjd1111 = res.data.content;
        // console.log(res.data.content);
      });
    },
    ptjs() {
      getZhjdxqy().then((res) => {
        this.zhjd111 = res.data.data;
        // console.log(res.data.data);
      });
    },
  },
  components: {
    Header,
    Footer,
    tabless,
    imgss,
  },
};
</script>

<style lang="scss" scoped>
.bg1 {
  height: 600px;
  // min-width: 1920px;
  // background: url(./zhjd_img/bg1.png);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 600px;
    width: 100%;
  }
  .bg11 {
    height: 600px;
    width: 100%;
  }
  .zhjd {
    min-width: 206px;
    height: 67px;
    font-size: 48px;
    color: #ffffff;
    position: absolute;
    top: 230px;
    left: 361px;
    text-align: left;
  }
  .zhfw {
    width: 670px;
    height: 66px;
    font-size: 24px;
    color: #ffffff;
    position: absolute;
    top: 321px;
    left: 361px;
    text-align: left;
  }
}
.bg2 {
  height: 700px;
  // min-width: 1920px;
  position: relative;

  .yzsfw {
    min-width: 15.052vw;
    height: 2.917vw;
    font-size: 2.083vw;
    color: #333333;
    position: absolute;
    top: 0.167vw;
    left: 4.417vw;
  }
  .zkty {
    min-width: 336px;
    height: 40px;
    font-size: 20px;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 792px;
  }
  // .icon1 {
  //   position: absolute;
  //   top: 257px;
  //   left: 794px;
  // }
  // .icon2 {
  //   position: absolute;
  //   top: 257px;
  //   left: 861px;
  // }
  // .icon3 {
  //   position: absolute;
  //   top: 257px;
  //   left: 929px;
  // }
  // .icon4 {
  //   position: absolute;
  //   top: 257px;
  //   left: 997px;
  // }
  // .icon5 {
  //   position: absolute;
  //   top: 257px;
  //   left: 1065px;
  // }
  // .icon6 {
  //   position: absolute;
  //   top: 257px;
  //   left: 1133px;
  // }
  // .rhz {
  //   position: absolute;
  //   top: 298px;
  //   left: 739px;
  //   min-width: 59px;
  //   height: 28px;
  //   background: #ffffff;
  //   box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
  //   border-radius: 4px;
  //   font-size: 14px;
  //   color: #007aff;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  // }

  // .icon7 {
  //   position: absolute;
  //   top: 375px;
  //   left: 427px;
  // }
  // .icon8 {
  //   position: absolute;
  //   top: 375px;
  //   left: 536px;
  // }
  // .icon9 {
  //   position: absolute;
  //   top: 375px;
  //   left: 648px;
  // }
  // .icon10 {
  //   position: absolute;
  //   top: 375px;
  //   left: 1277px;
  // }
  // .icon11 {
  //   position: absolute;
  //   top: 375px;
  //   left: 1390px;
  // }
  // .icon12 {
  //   position: absolute;
  //   top: 375px;
  //   left: 1502px;
  // }
  // .icon13 {
  //   position: absolute;
  //   top: 452px;
  //   left: 482px;
  // }
  // .icon14 {
  //   position: absolute;
  //   top: 452px;
  //   left: 592px;
  // }
  // .icon15 {
  //   position: absolute;
  //   top: 452px;
  //   left: 704px;
  // }
  // .icon16 {
  //   position: absolute;
  //   top: 452px;
  //   left: 1219px;
  // }
  // .icon17 {
  //   position: absolute;
  //   top: 452px;
  //   left: 1331px;
  // }
  // .icon18 {
  //   position: absolute;
  //   top: 452px;
  //   left: 1433px;
  // }
  .rzh {
    position: absolute;
    min-width: 59px;
    height: 28px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    font-size: 14px;
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 414px;
    left: 1167px;
  }
  .rzq {
    position: absolute;
    min-width: 59px;
    height: 28px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    font-size: 14px;
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 413px;
    left: 360px;
  }
  .wz1 {
    min-width: 74px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 341px;
    left: 402px;
  }
  .wz2 {
    min-width: 72px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 341px;
    left: 513px;
  }
  .wz3 {
    min-width: 60px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 341px;
    left: 631px;
  }
  .wz4 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 782px;
  }
  .wz5 {
    min-width: 60px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 845px;
  }
  .wz6 {
    min-width: 60px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 912px;
  }
  .wz7 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 986px;
  }
  .wz8 {
    min-width: 72px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 1042px;
  }
  .wz9 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 1122px;
  }
  .wz10 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 1264px;
  }
  .wz11 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 1376px;
  }
  .wz12 {
    min-width: 74px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 329px;
    left: 1475px;
  }
  .wz13 {
    min-width: 72px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 495px;
    left: 457px;
  }
  .wz14 {
    min-width: 72px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 495px;
    left: 569px;
  }
  .wz15 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 495px;
    left: 693px;
  }
  .wz16 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 495px;
    left: 1208px;
  }
  .wz17 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 495px;
    left: 1320px;
  }
  .wz18 {
    min-width: 72px;
    height: 17px;
    font-size: 12px;
    color: #007aff;
    position: absolute;
    top: 495px;
    left: 1420px;
  }
  .wz19 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 354px;
    left: 782px;
  }
  .wz20 {
    min-width: 24px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 354px;
    left: 930px;
  }
  .wz21 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 354px;
    left: 986px;
  }
  .wz22 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 354px;
    left: 1054px;
  }
  .wz23 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 379px;
    left: 782px;
  }
  .wz24 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 379px;
    left: 918px;
  }
  .wz25 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 379px;
    left: 986px;
  }
  .wz26 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 379px;
    left: 1054px;
  }
  .wz27 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 17px;
    position: absolute;
    top: 404px;
    left: 782px;
  }
  .wz28 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 404px;
    left: 986px;
  }
  .wz29 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 404px;
    left: 1054px;
  }
  .wz30 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #666666;
    position: absolute;
    top: 429px;
    left: 986px;
  }
  .wz31 {
    min-width: 48px;
    height: 17px;
    font-size: 12px;
    color: #666666;
    position: absolute;
    top: 454px;
    left: 986px;
  }
  .btn {
    width: 156px;
    height: 48px;
    font-size: 20px;
    position: absolute;
    top: 552px;
    left: 882px;
    color: #007aff;
    background-color: #ffffff;
  }
}
.bg3 {
  // min-width: 1920px;
  height: 578px;
  background-color: #f6f8fb;
  position: relative;
  .sjjc {
    min-width: 292px;
    height: 60px;
    font-size: 40px;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 815px;
  }
  .ywzb {
    width: 849px;
    height: 80px;
    font-size: 20px;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 535px;
  }
  .box1 {
    min-width: 380px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 240px;
    left: 360px;
    .icon20 {
      width: 68px;
      height: 68px;
      position: absolute;
      top: 41px;
      left: 28px;
    }
    .sjfx {
      min-width: 80px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 112px;
    }
    .bb {
      width: 240px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 112px;
      text-align: left;
    }
  }
  .box2 {
    min-width: 380px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 240px;
    left: 770px;

    .icon21 {
      width: 68px;
      height: 68px;
      position: absolute;
      top: 41px;
      left: 28px;
    }
    .jyfx {
      min-width: 87px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 112px;
    }
    .cl {
      min-width: 168px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 112px;
    }
  }
  .box3 {
    min-width: 380px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 240px;
    left: 1180px;
  }
  .icon22 {
    width: 68px;
    height: 68px;
    position: absolute;
    top: 41px;
    left: 28px;
  }
  .yhfx {
    min-width: 80px;
    height: 28px;
    font-size: 20px;
    color: #333333;
    position: absolute;
    top: 43px;
    left: 112px;
  }
  .yhsj {
    min-width: 154px;
    height: 20px;
    font-size: 14px;
    color: #999999;
    position: absolute;
    top: 87px;
    left: 112px;
  }
  .btn1 {
    width: 156px;
    height: 48px;
    font-size: 20px;
    position: absolute;
    top: 430px;
    left: 882px;
    background-color: #ffffff;
    color: #007aff;
  }
}
.bg4 {
  height: 760px;
  // min-width: 1920px;
  position: relative;
  .qyyx {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 877px;
  }
  .ywzb {
    width: 849px;
    height: 80px;
    font-size: 20px;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 535px;
  }
  .img1 {
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 300px;
    left: 360px;
    width: 1200px;
    height: 360px;
    justify-content: center;

    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 360px;
      width: 100%;
    }
    .img11 {
      width: 1200px;
    }
    .fwyx {
      min-width: 330px;
      height: 56px;
      font-size: 40px;
      color: #ffffff;
      position: absolute;
      top: 120px;
      left: 57px;
    }
    .btn2 {
      width: 156px;
      height: 48px;
      font-size: 20px;
      position: absolute;
      top: 200px;
      left: 57px;
      background-color: rgba(0, 0, 0, 0);
      .btn22 {
        font-size: 20px;
        color: #ffffff;
      }
    }
  }
}
.bg5 {
  // min-width: 1920px;
  height: 587px;
  background: #f6f8fb;
  position: relative;
  .alfx {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 878px;
  }
  .image1 {
    min-width: 277px;
    height: 291px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 360px;
    .photo1 {
      min-width: 277px;
      height: 218px;
    }
    .kmbg {
      min-width: 150px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 242px;
      left: 64px;

      line-height: 25px;
    }
  }
  .image2 {
    min-width: 277px;
    height: 291px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 667px;
    .photo2 {
      min-width: 277px;
      height: 218px;
    }
    .shxg {
      min-width: 169px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 242px;
      left: 54px;

      line-height: 25px;
    }
  }
  .image3 {
    min-width: 277px;
    height: 291px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 974px;
    .photo3 {
      min-width: 277px;
      height: 218px;
    }
    .lgjd {
      min-width: 169px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 242px;
      left: 54px;
    }
  }
  .image4 {
    min-width: 277px;
    height: 291px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 1281px;
    .photo4 {
      min-width: 277px;
      height: 218px;
    }
    .qejd {
      min-width: 169px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 242px;
      left: 50px;
    }
  }
}
</style>
